// 图片懒加载
import { useIntersectionObserver } from '@vueuse/core';
import type { App, Directive } from 'vue';

const lazy: Directive<HTMLImageElement> = {
  mounted(imgEl: HTMLImageElement, { value: src }: { value: string }) {
    const { stop } = useIntersectionObserver(imgEl, ([isIntersecting]) => {
      if (isIntersecting) {
        imgEl.src = src;

        stop();
      }
    });
  }
};

export default (app: App) => {
  app.directive('lazy', lazy);
};
